<!--Created by 熊超超 on 2017/8/4.-->
<template>
  <air-scroll class="my">
    <transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
    <div class="p-40" v-if="user.id">
      <mu-raised-button label="退出登录" fullWidth @click="logout"></mu-raised-button>
    </div>
  </air-scroll>
</template>

<script>
  import {mapState} from 'vuex'
  import mixin from '$g/mixin'
  import Login from './Login'
  import MyMenu from './MyMenu'

  export default {
    components: {Login, MyMenu},
    mixins: [mixin.updateBar],
    data() {
      return {
        headerBar: {
          title: () => <div>我的</div>,
          rightBtn: 'more'
        },
        footerBar: {active: '/my'},
        push: true,
        sound: false,
        vibrate: true
      }
    },
    computed: {
      ...mapState({
        user: state => state.my.user
      }),
      view() {
        return this.user.id ? MyMenu : Login
      }
    },
    methods: {
      logout() {
        this.$store.commit('logout')
        this.$store.dispatch('logout', {})
      }
    }
  }
</script>

<style lang="less" scoped>
  .my /deep/ .mu-text-field {
    width: 100%;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
